<template>
  <div class="box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>订单详细</span>
        </div>
      </template>
      <div class="tag">
        <div class="left">
          <el-tag class="mx-1" type="success" effect="dark">
            <div class="left-tag">
              <svg
                t="1697972416299"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4011"
                width="16"
                height="16"
              >
                <path
                  d="M817.728 198.72l111.744 114.56-545.216 532.128-285.92-273.024 110.528-115.712 174.176 166.336z"
                  fill="#ffffff"
                  p-id="4012"
                ></path>
              </svg>
              <p v-if="orderDetail.registerStatus == 0">预约成功,待支付</p>
              <p v-else-if="orderDetail.registerStatus == 2">取消预约</p>
              <p v-else>已支付</p>
            </div>
          </el-tag>
        </div>
        <div class="right">
          <img src="../../../assets/images/code_app.png" alt="" />
          <div class="right-info">
            <p>微信关注“武汉第一人民医院小程序预约挂号”</p>
            <p>"快速预约挂号"</p>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊人姓名</div>
              </template>
              {{ orderDetail.patientId?.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊日期</div>
              </template>
              {{ orderDetail.scheduleId?.date }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊科室</div>
              </template>
              {{ orderDetail.doctorId?.TweDepart }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生职称</div>
              </template>
              {{ orderDetail.doctorId?.job?.jName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医院服务费</div>
              </template>
              {{ orderDetail.scheduleId?.price }} 元
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号单号</div>
              </template>
              在医院通过身份证取号
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号时间</div>
              </template>
              {{ orderDetail.scheduleId?.date }}
            </el-descriptions-item>
          </el-descriptions>
          <div class="left-bottom">
            <el-button v-if="orderDetail.registerStatus !== 2" @click="cancelOrder"
              >取消预约</el-button
            >
            <el-button
              type="primary"
              v-if="orderDetail.registerStatus == 0"
              @click="payOrder"
              >支付</el-button
            >
          </div>
        </div>
        <div class="right">
          <el-card>
            <template #header>
              <span>注意事项</span>
            </template>
            <div class="contend">
              <p>
                1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
              </p>
              <p style="color: red">
                2.【取号】就诊当天需在
                {{ orderDetail.scheduleId?.date }}
                {{ orderDetail.scheduleId?.endTime }} 点前
                在医院取号，未取号视为爽约，该号不退不换；
              </p>
              <p>
                3.【退号】{{ orderDetail.scheduleId?.date }}
                {{
                  subtractHalfHour(orderDetail.scheduleId?.endTime)
                }}
                在前可在线退号 ，逾期将不可办理退号退费；
              </p>
              <p>
                4.武汉预约挂号支持自费患者使用身份证预约，同时支持武汉市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
              </p>
              <p>5.请注意武汉市医保患者在住院期间不能使用社保卡在门诊取号。</p>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getOrderDetailAPI, payOrderAPI , cancelOrderAPI } from "@/api/order.js";
import { subtractHalfHour } from "@/utils/string";
import { ElMessage, ElMessageBox } from "element-plus";
let orderDetail = ref({});
const route = useRoute();
const router = useRouter();
const id = route.query.id;
onMounted(() => {
  getOrderDetail();
});
//获取订单详情
const getOrderDetail = async () => {
  let result = await getOrderDetailAPI(id);
  console.log(result);
  orderDetail.value = result.data;
};
//支付订单
const payOrder = async () => {
  ElMessageBox.confirm("是否确认支付?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //调用支付接口
      let result = await payOrderAPI(id);
      console.log(result);
      ElMessage.success("支付成功");
      //重新获取订单详情
      getOrderDetail();
    })
    .catch(() => {
      ElMessage.info("取消支付");
    });
};
//取消预约
const cancelOrder = async ()=>{
  ElMessageBox.confirm("是否确认取消预约?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //调用取消预约接口
      await cancelOrderAPI(id)
      ElMessage.success("取消预约成功");
      //重新获取订单详情
      getOrderDetail();
    })
    .catch(() => {
    ElMessage.info("取消取消预约");
  })
}
</script>

<style scoped lang="scss">
.box {
  color: #7f7f7f;
  .card-header {
    font-size: 25px;
    font-weight: 900;
    color: #7f7f7f;
  }
  .tag {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    .left {
      .left-tag {
        display: flex;
        align-items: center;
        p {
          margin-left: 5px;
        }
      }
    }
    .right {
      display: flex;
      img {
        width: 40px;
        height: 40px;
      }
      .right-info {
        font-size: 13px;
        p {
          line-height: 20px;
          margin-left: 10px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 30px;
    padding: 10px;
    .left {
      flex: 4;
      .left-bottom {
        margin-top: 20px;
      }
    }
    .right {
      flex: 6;
      margin-left: 10px;
      span {
        font-size: 18px;
        font-weight: 900;
      }
      .contend {
        p {
          margin: 10px 0;
          line-height: 25px;
        }
      }
    }
    .qercode {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        line-height: 20px;
        font-weight: 900;
      }
    }
  }
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
}
</style>
